<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <el-descriptions title="心理咨询师申请表" :column="4" border>
        <el-descriptions-item
            label="姓名"
            label-align="center"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
        >{{ apply.applyName }}</el-descriptions-item
        >
        <el-descriptions-item label="性别" label-align="center" align="center" width="100px"
        >{{ resGender }}</el-descriptions-item
        >
        <el-descriptions-item label="出生年月" label-align="center" align="center" width="180px"
        >{{ resBirthday }}</el-descriptions-item
        >
        <el-descriptions-item label="从业时间" label-align="center" align="center" width="150">
          <!--<el-tag size="small"></el-tag>-->
          {{ resWorkingTime }}
        </el-descriptions-item>
        <el-descriptions-item label="原职业资格等级" label-align="center" align="center"
        >{{ apply.certificateLevel }}级</el-descriptions-item
        >
        <el-descriptions-item label="从事本职业工作时间" label-align="center" align="center" min-width="150px"
        >{{ apply.workingYear }}年</el-descriptions-item
        >
        <el-descriptions-item label="身份证号" label-align="center" align="center" min-width="100px"
        >{{ apply.idCardNum }}</el-descriptions-item
        >

      </el-descriptions>

      <el-descriptions
          title=""
          direction="vertical"
          :column="1"
          border
      >
        <el-descriptions-item label="备注" label-align="center" align="center" width="100%"
        >{{ apply.applyDes }}</el-descriptions-item
        >
      </el-descriptions>

      <br>

      <el-descriptions
          title="附加材料:(附:身份证正面照、职业资格证书照片)"
          direction="vertical"
          :column="2"
          border
      >
        <el-descriptions-item label="身份证正面照" label-align="left" align="center">
          <div class="demo-image__preview">
          <el-image
              style="width: 200px; height: 200px"
              :src="apply.idCardImg"
              :preview-src-list="apply.idCardImg"
          >
          </el-image>
          </div>
        </el-descriptions-item
        >
        <el-descriptions-item label="心理咨询师证件图" label-align="left" align="center">
          <div class="demo-image__preview">
            <el-image
                style="width: 200px; height: 200px"
                :src="apply.certificateImg"
                :preview-src-list="apply.certificateImg"
            >
            </el-image>
          </div>
        </el-descriptions-item
        >
      </el-descriptions>

      <br>

      <!--已经审核了才会显示这个-->
      <el-descriptions title="审核详情" :column="4" border v-if="apply.auditResult != 0">
        <el-descriptions-item label="审核人" label-align="center" align="center" width="100px"
        >{{ apply.auditName }}</el-descriptions-item
        >
        <el-descriptions-item label="审核结果" label-align="center" align="center" width="150px"
        >{{ resAuditResult }}</el-descriptions-item
        >
        <el-descriptions-item label="申请时间" label-align="center" align="center" min-width="150px"
        >{{ apply.applyTime }}</el-descriptions-item
        >
        <el-descriptions-item label="审核时间" label-align="center" align="center" min-width="150px"
        >{{ apply.auditTime }}</el-descriptions-item
        >
        <el-descriptions-item label="审核备注" label-align="center" align="center"
        >{{ apply.auditDes }}</el-descriptions-item
        >
      </el-descriptions>

      <br>

      <!--没审核显示下面的-->
      <el-form label-width="100px"
               status-icon
               v-if="apply.auditResult === 0"
      >
        <el-form-item label="审核结果">
          <el-radio-group v-model="audit.auditResult">
            <el-radio :label="1" border>通过</el-radio>
            <el-radio :label="2" border>不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审核备注">
          <el-input id="input-textarea" :rows="5" v-model="audit.auditDes" type="textarea" maxlength="300"
          placeholder="年龄原因、附加材料不完整、从事本职业工作时间太短等"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="medium" @click="resetData" id="reset-btn">重置</el-button>
          <el-button type="primary" size="medium" @click="auditApply">提交</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import apply from "@/api/admin/admin";

export default {

  data() {
    // 默认图片
    const DefaultPortrait = "https://bluedot-a.oss-cn-hangzhou.aliyuncs.com/bluedot/portrait/2021/09/21/0860dc2efb074bc4bac19c97f7ee342b.png"

    return {
      /*
      未审核的记录
      "id": 1,  //申请表主键
      "userId": 3376322891316, //对应的用户id
      "auditId": null,  //审核人员编号
      "auditName": "李斯",  //审核人员姓名
      "gender": 0,  //性别
      "certificateImg": "http://",  //心理咨询师证件图片链接
      "idCardImg": "http://",  //身份证正面照
      "certificateLevel": 3,  //证件等级
      "workingTime": "2021-09-09 00:00:00",  //正式从事心理咨询师工作的时间
      "applyName": "王德发", //名字
      "idCardNum": "362201200408071234",  //身份证编号
      "birthday": "2021-09-09 00:00:00",  //出生年月日
      "workingYear": 5,  //已从事心理咨询师工作多少年
      "applyDes": "申请描述1",  //申请描述
      "auditResult": 0,  //审核结果 1成功 2不成功
      "auditDes": "审核描述1",  //审核描述
      "auditTime": "2021-10-10 21:54:59",  //审核时间
      "applyTime": "2021-10-10 21:54:59",  //申请时间

     * @param id       申请表主键id 这个申请表主键id对应的数据对应的用户id都是没有被删除的
     * @param userId   用户id
     * @param auditId  审核人员编号id
     * @param result   审核结果对应的数字 1通过 2失败
     * @param auditDes 审核备注
      */
      apply: {},
      audit: {
        //默认成功
        auditResult: 1,
        auditDes: '',
        id: null,
        userId: null,
        auditId: null, //审核人员编号 也就是管理员编号
      },
      resBirthday: null,
      resWorkingTime: null,
      resGender: null,
      resAuditResult: null,
      adminInfo: null,
      //默认图片路径 没用
      url: DefaultPortrait,
    };
  },
  created() {
    // 如果路由中有参数值则执行此方法
    if(this.$route.params && this.$route.params.id) {
      // 从路由中获取id值
      const id = this.$route.params.id
      // 调用根据id查询的方法
      this.getApplyDetail(id)
    }
  },
  watch: {  // 监听(解决路由切换问题)
    // 路由变化方式，路由发生变化即执行
    $route(to, from){
      this.getApplyDetail();
    }
  },
  methods: {
    getApplyDetail(id) {
      apply.getApplyDetail(id).then(response => {
        this.apply = response.data.item
        this.audit.id = response.data.item.id
        this.audit.userId = response.data.item.userId
        this.formatterTime(response.data.item.birthday,response.data.item.workingTime)
        this.formatterGender(response.data.item.gender)
        this.formatterAuditResult(response.data.item.auditResult)
        this.adminInfo = JSON.parse(localStorage.getItem("SESSION_KEY_USERID"));
      })
    },
    // 重置审核栏
    resetData() {
      this.audit.auditResult = 1;
      this.audit.auditDes = null;
    },
    //审核申请
    auditApply() {
      // console.log(this.adminInfo)
      // console.log(this.audit.userId)
      // console.log(this.audit.id)
      this.audit.auditId = this.adminInfo

      apply.auditApply(this.audit).then(resp => {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        // 审核后跳转页面
        this.$router.push("/admin/apply")
      }).catch(resp => {
        this.$message({
          type: 'error',
          message: resp.message
        })
      })
    },
    //审核结果格式化
    formatterAuditResult(data){
      if (data === 1){
        this.resAuditResult = '申请成功'
      }else this.resAuditResult = '申请失败'
    },
    //性别格式化
    formatterGender(data){
      if (data === 0){
        this.resGender = '男'
      }else this.resGender = '女'
    },
    //格式化出生年月
    formatterTime(data,data1){
        this.resWorkingTime = data1.substring(0, 11)
        this.resBirthday = data.substring(0, 11)
    },
  },
}
</script>

<style scoped>

</style>